<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
  <!--导航切换-->
  
  <div class=".p-30">
    <span class="icon iconfont icon-arrow_back" style="margin-left:30px"></span>
  <el-button type="text" style="font-size:16px" @click="parent">返回</el-button><span> | 历史记录</span>
  <!-- <el-button style="margin:10px 30px">返回</el-button> -->
  <el-form label-width="10px" :model="check"  ref="verification" >
    <el-row type="flex">
      <el-form-item prop="start_time" label-width="30px">
      <el-date-picker
      style="width:190px"
      v-model="check.start_time"
      clearable 
      type="date"
      placeholder="开始时间"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
       </el-form-item>
      <el-form-item prop="ent_time">
      <el-date-picker
      style="width:190px"
      v-model="check.ent_time"
      clearable 
      type="date"
      placeholder="结束时间"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
       </el-form-item>
   
      <el-form-item>
      <el-button type="primary" @click="search_for">搜&ensp;&ensp;索</el-button> 
      <el-button @click="resetForm('verification')">重&ensp;&ensp;置</el-button>
       </el-form-item>

    </el-row>
</el-form>
  <!-- 表格 -->
    <div class="main">
        <el-table  :data="tableData"  border=''  style="width:100%" type="flex" justify="center" v-loading="loading">
      <el-table-column label="序&ensp;&ensp;号" width="120" type="index"  align='center' prop="">
      </el-table-column>   
      <el-table-column label="名&ensp;&ensp;称"  width=''  align='center'  prop="company.comName">
      </el-table-column>
      <el-table-column label="社&ensp;&ensp;区"  width=""  align='center' prop="company.place_5.name">
      </el-table-column>
      <el-table-column label="地&ensp;&ensp;址"  width="" align='center' prop="company.address">
      </el-table-column>
      <el-table-column label="视频/照片"  width="" align='center' prop="url">
      <template slot-scope="scope">  <img :src="tableData[ scope.$index ].url"  style="width:100px;height:100px;line-height:100px;margin:10px auto"/>
      </template>
      </el-table-column>
      <el-table-column label="备&ensp;&ensp;注"  width="" align='center' prop="remarks">
      </el-table-column>
      <el-table-column label="提交时间"  width="" align='center' prop="created_at">
      </el-table-column>
      <el-table-column label="操&ensp;&ensp;作"  width="200" align='center'>
            <template slot-scope="scope">
	        <el-button type="warning"  @click="Inventory(scope.row)" size="mini" >
           详&ensp;&ensp;情
          </el-button>
			</template>
            </el-table-column>  
  </el-table>
    <!-- 弹窗 -->
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="50%"
        :before-close="ai_dialog_close"
        >
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
        <el-card class="box-card"> 
        <div class="trstyle">   
        <p><b>名&ensp;&ensp;称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span>@{{corporate_name.comName}}</span></p>
          <p><b>经营地址：</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>@{{corporate_name.address}}</span></p>
          <p><b>法定代表人：</b> &nbsp;&nbsp;<span></span></p>
          <p><b>联系电话：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span></span></p>
          <p><b>备注/晨会内容:</b><span>@{{listone.remarks}}</p>
          <p><b>提交人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span>@{{users.name}}</span></p>
          <p><b>提交时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span>@{{listone.created_at}}</span></p>
          <!-- <p class="url_img"><b>视频/照片：&nbsp;</b> <span><img :src="listone.url"></span></p>  -->
          <p class="url_img"><b>照片/视频:</b> <span>
            <el-image 
            class="image"
            :src="listone.url" 
            :preview-src-list ="[listone.url]"
             > 
            </el-image>
            <video :src="listone.video" controls="controls"  :style="{ display: listone.video == null ?'none':'' }">
           </video>
          </span></p>      
        </div>
        </el-card>     
        </table>                     
      </el-dialog>
    <!-- 分页组件 -->
    <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>
    </div>
</div>
 </div>
  </div>
</div>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data() {
    return { 
        loading: false,
        title:'详情',
        dialogFormVisible:false,
        loading:false,
        listone:'', //数据
        meeting:{
          personnel:''
       },
        check:{
            start_time:'',
            ent_time:''

        },
        tableData:[],  //数据
        corporate_name:[],
        users:[],
        currentPage: 1, // 当前页码
        count: 30, // 总条数
        pageSize: 10,// 每页的数据条数
     
    }
  },
  created() {
       this.search_for()
  },
  methods: {
       //拿到页面id
       getQueryVariableId(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
			return pair[1];
			}
			}
        },  



  //重置
   resetForm(formName) {
       this.$refs[formName].resetFields()
       this.search_for()
     },
  //返回上一层
  parent(){
    window.location.href = '/admin/examview/samedemand'

  },

    //搜索
   async search_for(){
    this.loading = true
       let res = await axios.post('/admin/meet/listdata',{
        company_id:this.getQueryVariableId('id'),
        start_created_at:this.check.start_time,
        end_created_at:this.check.ent_time,
        page:this.currentPage,
        limit:this.pageSize
       })
       this.tableData = res.data.data.list 
       this.count = res.data.data.count
       this.loading = false
    },
    //关闭弹窗
    ai_dialog_close(){
      this.loading = true
      this.dialogFormVisible = false
      this.corporate_name.comName = ''
      this.corporate_name.address = ''
      this.listone.remarks = ''
      this.users.name = ''
      this.listone.created_at = ''
      this.listone.url = ''
      this.listone.video = ''
      this.loading = false
    },
    //历史详情
    async Inventory(rows){
        this.dialogFormVisible = true
        let res = await axios.post('/admin/meet/referweb',{id:rows.id})
        console.log('res',res);
        this.listone = res.data.data
        this.corporate_name = res.data.data.company
        this.users = res.data.data.users
    },
            // 分页页码  
        handleSizeChange(val){
            console.log(`每页 ${val} 条`);
			      this.currentPage = 1;
			      this.pageSize = val;
            this.search_for()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
			      this.currentPage = val;
            this.search_for()
          },


    },

  })

</script>
<style scoped>
  .el-table .el-table__cell:first-child{text-align: center;}
  .dashboard_text{
    height: 45px;
    line-height:45px;
    background-color: #f3f3f3; 
    padding-left:30px;
    margin-bottom:30px;
  }

 .p-30{
       margin: 0 auto;
 }
 .trstyle b {
    margin: 20px 50px;
 }
 .url_img{
  display:inline
}
.url_img img{
  vertical-align:middle;
  width:150px;
  height:150px
}
.image {
  vertical-align:middle !important;
  width:150px;
  height:150px
}
.url_img video{
  vertical-align:middle;
  width:150px;
  height:150px;
  margin:20px;
}
.main{
  padding:10px 30px;
}

 a{color:#409EFF;text-decoration: none;}
</style>
</body>
</html>